﻿<phone:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Phone7_Fx_Controls="clr-namespace:Phone7.Fx.Controls;assembly=Phone7.Fx"
	 xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
	 xmlns:ec="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" 
  xmlns:bh="clr-namespace:Odyssey.Behaviors;assembly=Odyssey"
  xmlns:fx="clr-namespace:Odyssey.Effects;assembly=Odyssey"
   xmlns:c4fToolkit="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls" 
    xmlns:c4fToolkitBinding="clr-namespace:Coding4Fun.Phone.Controls.Binding;assembly=Coding4Fun.Phone.Controls" 
    xmlns:sltoolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

  xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:eim="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions" 
    xmlns:Bewise_Phone="clr-namespace:Bewise.Phone;assembly=Bewise.Phone" 
    xmlns:Odyssey_Controls="clr-namespace:Odyssey.Controls;assembly=Odyssey" 
    xmlns:ShoppingList_Converters="clr-namespace:ShoppingList.Converters" 
    xmlns:GalaSoft_MvvmLight_Command="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP71" 
    xmlns:Phone7_Fx_Triggers="clr-namespace:Phone7.Fx.Triggers;assembly=Phone7.Fx" 
    toolkit:TiltEffect.IsTiltEnabled="True"

  
    x:Class="ShoppingList.Views.ProductsView"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="696" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True"
	bh:TiltEffect.IsTiltEnabled="True"
	>


    <phone:PhoneApplicationPage.Resources>
    	<ShoppingList_Converters:StringWithOutSpacesConverter x:Key="StringWithOutSpacesConverter"/>
    	<ShoppingList_Converters:StringToImageConverter x:Key="StringToImageConverter"/>
    	<Storyboard 
    		x:Name="trexStoryboard" 
    		AutoReverse="True" 
    		RepeatBehavior="Forever"  >
    		<DoubleAnimationUsingKeyFrames 
    			Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
    			Storyboard.TargetName="image">
    			<SplineDoubleKeyFrame KeyTime="0:0:1"/>
    			<SplineDoubleKeyFrame KeyTime="0:0:36" Value="-307"/>
    			<SplineDoubleKeyFrame KeyTime="0:0:37" Value="-307" />
    		</DoubleAnimationUsingKeyFrames>
    	</Storyboard>
    	<DataTemplate x:Key="DataTemplate1">
    		<Grid>
    			<TextBlock Margin="0,0,1,0" TextWrapping="Wrap" Text="{Binding ProductItem.Name}" d:LayoutOverrides="Width, Height"/>
    		</Grid>
    	</DataTemplate>
		
		
    	<DataTemplate x:Key="menuItemTemplate2">
    		<Odyssey_Controls:ContextMenu>
    			<Odyssey_Controls:ContextMenuItem Content="Editar" Command="{Binding UpdateProductCommand}" InvokeOnMenuClosed="False"/>
    			<Odyssey_Controls:ContextMenuItem Content="Eliminar" Command="{Binding DeleteCommand}" IsEnabled="False"  />
    		</Odyssey_Controls:ContextMenu>
    	</DataTemplate>
    	<DataTemplate x:Key="DataTemplate2">
    		<Grid Width="132">
    			<Image Source="/icons/appbar.folder.rest.png" Width="48" Height="48" HorizontalAlignment="Left"/>
    			<Image Source="/icons/appbar.basecircle.rest.png" Width="48" Height="48" HorizontalAlignment="Left"/>
    			<TextBlock Margin="48,8,24,13" TextWrapping="Wrap" Text="galería" d:LayoutOverrides="Width, Height"/>
    		</Grid>
    	</DataTemplate>
    	<DataTemplate x:Key="DataTemplate3">
    		<Grid Width="132">
    			<Image Source="/icons/appbar.feature.camera.rest.png" Width="48" Height="48" HorizontalAlignment="Left"/>
    			<Image Source="/icons/appbar.basecircle.rest.png" Width="48" Height="48" HorizontalAlignment="Left"/>
    			<TextBlock Margin="48,8,8,13" TextWrapping="Wrap" Text="cámara" d:LayoutOverrides="Height"/>
    		</Grid>
    	</DataTemplate>
    </phone:PhoneApplicationPage.Resources>


    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardIn"/>
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardIn"/>
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardOut"/>
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardOut"/>
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>
 
<!--Sample code showing usage of ApplicationBar--><!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

	<phone:PhoneApplicationPage.FontFamily>
		<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
	</phone:PhoneApplicationPage.FontFamily>
	<phone:PhoneApplicationPage.FontSize>
		<StaticResource ResourceKey="PhoneFontSizeNormal"/>
	</phone:PhoneApplicationPage.FontSize>
	<phone:PhoneApplicationPage.Foreground>
		<StaticResource ResourceKey="PhoneForegroundBrush"/>
	</phone:PhoneApplicationPage.Foreground>
	<phone:PhoneApplicationPage.DataContext>
		<StaticResource ResourceKey="Locator"/>
	</phone:PhoneApplicationPage.DataContext>
	

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{Binding ViewModelProducts, Mode=OneWay}">
    	<VisualStateManager.VisualStateGroups>
    		<VisualStateGroup x:Name="VisualStateGroup">
    			<VisualState x:Name="ShowProducts">
    				<Storyboard>
    					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="GridProducts">
    						<DiscreteObjectKeyFrame KeyTime="0">
    							<DiscreteObjectKeyFrame.Value>
    								<Visibility>Visible</Visibility>
    							</DiscreteObjectKeyFrame.Value>
    						</DiscreteObjectKeyFrame>
    					</ObjectAnimationUsingKeyFrames>
    					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="GridNewProduct">
    						<DiscreteObjectKeyFrame KeyTime="0">
    							<DiscreteObjectKeyFrame.Value>
    								<Visibility>Collapsed</Visibility>
    							</DiscreteObjectKeyFrame.Value>
    						</DiscreteObjectKeyFrame>
    					</ObjectAnimationUsingKeyFrames>
    				</Storyboard>
    			</VisualState>
    			<VisualState x:Name="ShowNewProduct">
    				<Storyboard>
    					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="GridNewProduct">
    						<DiscreteObjectKeyFrame KeyTime="0">
    							<DiscreteObjectKeyFrame.Value>
    								<Visibility>Visible</Visibility>
    							</DiscreteObjectKeyFrame.Value>
    						</DiscreteObjectKeyFrame>
    					</ObjectAnimationUsingKeyFrames>
    					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="GridProducts">
    						<DiscreteObjectKeyFrame KeyTime="0">
    							<DiscreteObjectKeyFrame.Value>
    								<Visibility>Collapsed</Visibility>
    							</DiscreteObjectKeyFrame.Value>
    						</DiscreteObjectKeyFrame>
    					</ObjectAnimationUsingKeyFrames>
    				</Storyboard>
    			</VisualState>
    		</VisualStateGroup>
    	</VisualStateManager.VisualStateGroups>
        <Grid.RowDefinitions>
        	<RowDefinition Height="Auto"/>
        	<RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="SHOPPING ANALYTICS" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="productos" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

    	<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    		<Grid x:Name="GridProducts">
    			<Odyssey_Controls:OdcListBox x:Name="odcListBox" ItemsSource="{Binding Products, Mode=TwoWay}"
				 >
    				<i:Interaction.Triggers>
    					<i:EventTrigger EventName="ItemInvoked">
    						<i:InvokeCommandAction Command="{Binding UpdateProductCommand, Mode=TwoWay}" CommandParameter="{Binding SelectedItem, ElementName=odcListBox, Mode=TwoWay}"/>
    					</i:EventTrigger>
    				</i:Interaction.Triggers>
    				
    				<Odyssey_Controls:OdcListBox.ItemTemplate>
    					<DataTemplate>
    						<Grid  HorizontalAlignment="Stretch" >
    							<Grid.ColumnDefinitions>
    								<ColumnDefinition Width="Auto"/>
    								<ColumnDefinition Width="*"/>
    							</Grid.ColumnDefinitions>
    							<TextBlock Grid.Column="1" Text="{Binding CurrentProduct.Name}" FontSize="48" VerticalAlignment="Center" Margin="15,4,5,4"/>
    							<Border Height="72" Margin="8,4,8,8" Width="72" Background="{StaticResource PhoneAccentBrush}" >
                             
    								<Image Source="{Binding CurrentProduct.ImageUri, Converter={StaticResource StringToImageConverter}, Mode=TwoWay}"/>
    							</Border>
    						</Grid>
    					</DataTemplate>
    				</Odyssey_Controls:OdcListBox.ItemTemplate>
				
    				<Odyssey_Controls:OdcListBox.HeaderTemplate>
    					<DataTemplate>
    						<Border Background="{StaticResource PhoneAccentBrush}" Width="72" Height="72" VerticalAlignment="Center" Margin="8,4" HorizontalAlignment="Left">
    							<TextBlock Text="{Binding Title}" VerticalAlignment="Center" FontSize="32" Margin="5,0" Foreground="White"/>
    						</Border>
    					</DataTemplate>
    				</Odyssey_Controls:OdcListBox.HeaderTemplate>
				
				   
    			</Odyssey_Controls:OdcListBox>
    		</Grid>
    		<Grid x:Name="GridNewProduct" DataContext="{Binding ProductItem.CurrentProduct, Mode=TwoWay}" Visibility="Collapsed">
    			<Grid.RowDefinitions>
    				<RowDefinition/>
    				<RowDefinition Height="69"/>
    			</Grid.RowDefinitions>
    			<StackPanel VerticalAlignment="Top" Margin="0,8,0,0">
    				<TextBlock TextWrapping="Wrap" Text="Nombre"/>
    				<TextBox x:Name="TxtProductName" TextWrapping="Wrap" Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=Explicit}" InputScope="Default" MaxLength="15"/>
    			</StackPanel>
    			<Image Margin="8,176,8,8" Source="{Binding Img, Mode=TwoWay}" DataContext="{Binding DataContext, ElementName=LayoutRoot, Mode=TwoWay}"/>
    			<c4fToolkit:Tile 
    				VerticalAlignment="Top" 
    				c4fToolkitBinding:FrameworkElementBinding.ClipToBounds="True"
    				Margin="8,111,0,0" Height="61"
    				ContentTemplate="{StaticResource TileCameraButton}" DataContext="{Binding DataContext, ElementName=LayoutRoot, Mode=TwoWay}" HorizontalAlignment="Left" Width="177" Command="{Binding SelectImageCommand}"/>
				
        			    		
				
    		</Grid>
    	</Grid>
    	<Phone7_Fx_Controls:BindableApplicationBar x:Name="AppBar" BarOpacity="1.0"   >
    		<Phone7_Fx_Controls:BindableApplicationBar.MenuItems> 
    			<Phone7_Fx_Controls:BindableApplicationBarMenuItem  Text="Settings" Command="{Binding SettingsCommand}" />
    		</Phone7_Fx_Controls:BindableApplicationBar.MenuItems>
    		<Phone7_Fx_Controls:BindableApplicationBarIconButton x:Name="btnBarAddButton" 
    			Text="agregar"
    			IconUri="/icons/appbar.add.rest.png" IsEnabled="{Binding canUseButtons, Mode=TwoWay}" Command="{Binding ShowNewProductCommand}"
	 
	  >
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="Click">
    					<ec:GoToStateAction StateName="ShowNewProduct"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    		</Phone7_Fx_Controls:BindableApplicationBarIconButton>
    		<Phone7_Fx_Controls:BindableApplicationBarIconButton x:Name="BtnSaveButton" Text="guardar" IconUri="/icons/appbar.save.rest.png" IsEnabled="{Binding canSaveCancelButtons, Mode=TwoWay}" Command="{Binding SaveProductCommand}">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="Click">
    					<i:Interaction.Behaviors>
    						<ec:ConditionBehavior>
    							<ec:ConditionalExpression>
    								<ec:ComparisonCondition LeftOperand="{Binding ValidFields, Mode=TwoWay}" RightOperand="True"/>
    							</ec:ConditionalExpression>
    						</ec:ConditionBehavior>
    					</i:Interaction.Behaviors>
    					<ec:GoToStateAction StateName="ShowProducts"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    		</Phone7_Fx_Controls:BindableApplicationBarIconButton>
    		<Phone7_Fx_Controls:BindableApplicationBarIconButton x:Name="BtnBarCancelButton" Text="cancelar" IconUri="/icons/appbar.cancel.rest.png" IsEnabled="{Binding canSaveCancelButtons, Mode=TwoWay}" Command="{Binding CancelCommand}">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="Click">
    					<ec:GoToStateAction StateName="ShowProducts"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    		</Phone7_Fx_Controls:BindableApplicationBarIconButton> 
    	</Phone7_Fx_Controls:BindableApplicationBar>
    </Grid>

</phone:PhoneApplicationPage>
